<template>
  <div class="order_detail">
    <Header-Comp ref="header" title="订单详情" />
    <div class="noInfo loading" v-show="showLoading">
      <img src="../../../assets/img/flow/loading.gif" class="img" alt />
    </div>
    <div class="content" v-if="type == 0">
      <div class="top">
        <div class="price">
          ￥{{ (formData.commissionFee / 100).toFixed(2) }}
        </div>
        <div>{{ formData.orderTradeType == 2 ? "退回" : "" }}抽佣金额</div>
      </div>
      <div class="list">
        <div class="left">抽佣比例</div>
        <div class="right">{{ formData.rakeRate }}%</div>
      </div>
      <div class="list">
        <div class="left">订单类型</div>
        <div class="right">
          {{ formData.orderTradeType == 1 ? "交易订单" : "订单售后" }}
        </div>
      </div>
      <div class="list">
        <div class="left">订单号</div>
        <div class="right">{{ formData.orderNo }}</div>
      </div>
      <div class="list">
        <div class="left">订单总额</div>
        <div class="right">￥{{ (formData.totalFee / 100).toFixed(2) }}</div>
      </div>
      <div class="list">
        <div class="left">实付金额</div>
        <div class="right">￥{{ (formData.ssFee / 100).toFixed(2) }}</div>
      </div>
      <div class="list">
        <div class="left">优惠信息</div>
        <div class="right discounts">
          <div>{{ formData.discountDesc || "无" }}</div>
          <div>{{ discountOptions[formData.favourableType]&&discountOptions[formData.favourableType].desc }}</div>
        </div>
      </div>
      <div class="list">
        <div class="left">支付方式</div>
        <div class="right">{{ formData.paymentMethod }}</div>
      </div>
      <div class="list">
        <div class="left">支付时间</div>
        <div class="right">{{ formData.payTime }}</div>
      </div>
    </div>
    <div class="content" v-else-if="type == 1">
      <div class="top">
        <div class="price">
          ￥{{ (formData.subsidyAmount / 100).toFixed(2) }}
        </div>
        <div>{{ formData.orderTradeType == 2 ? "退回" : "" }}补贴金额</div>
      </div>
      <div class="list">
        <div class="left">订单类型</div>
        <div class="right">
          {{ formData.orderTradeType == 1 ? "交易订单" : "订单售后" }}
        </div>
      </div>
      <div class="list">
        <div class="left">订单号</div>
        <div class="right">{{ formData.orderNo }}</div>
      </div>
      <div class="list">
        <div class="left">订单总额</div>
        <div class="right">￥{{ (formData.totalFee / 100).toFixed(2) }}</div>
      </div>
      <div class="list">
        <div class="left">优惠信息</div>
        <div class="right discounts">
          <div>{{ formData.discountDesc || "无" }}</div>
          <div>{{ discountOptions[formData.favourableType]&&discountOptions[formData.favourableType].desc }}</div>
        </div>
      </div>
      <div class="list">
        <div class="left">支付时间</div>
        <div class="right">{{ formData.payTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { rebateOrderDetail, subsidyOrderDetail } from "@/api/flow/index";
export default {
  created() {
    this.type = this.$route.query.type;
    this.queryPar = this.$route.query
    this.showLoading = true;
    this.getData();
  },
  data() {
    return {
      type: 0,
      queryPar: "",
      formData: {},
      discountOptions: {
        1: { desc: "超级会员折扣" },
        2: { desc: "优惠券折扣" },
        3: { desc: "积分折扣" },
      },
      showLoading: false,
    };
  },
  methods: {
    getData() {
      let { type, queryPar:{id,orderNo} } = this;
      if (!type) return;
      if (type == 0) {
        rebateOrderDetail({ id }).then((result) => {
          let { data: res } = result;
          if (res.code == 0) {
            this.formData = res.data;
            this.showLoading = false;
          } else {
            this.showLoading = false;
          }
        });
      } else if (type == 1) {
        subsidyOrderDetail({ id }).then((result) => {
          let { data: res } = result;
          if (res.code == 0) {
            this.formData = res.data;
            this.showLoading = false;
          } else {
            this.showLoading = false;
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@primary: #feb518;
/deep/.van-nav-bar {
  z-index: 11;
}
.order_detail {
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  .noInfo {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    .img {
      width: 150px;
      height: 150px;
    }
  }
  .content {
    flex: 1;
    overflow-y: scroll;
    padding: 0 30px;
    .top {
      padding: 70px 0 35px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #131313;
      .price {
        margin-bottom: 25px;
        font-size: 46px;
      }
    }
    .list {
      display: flex;
      justify-content: space-between;
      font-size: 31px;
      font-family: PingFang SC;
      font-weight: 400;
      padding: 30px 0;
      position: relative;
      // border-bottom: 1px solid rgba(231, 231, 231, 0.8);
      &::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border-bottom: 1px solid rgba(231, 231, 231, 0.8);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
      .left {
        color: #3d3d3d;
        opacity: 0.8;
      }
      .discounts {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        :first-child {
          margin-bottom: 15px;
        }
        :nth-child(2) {
          color: @primary;
          font-size: 26px;
        }
      }
      .right {
        color: #131313;
      }
    }
  }
}
</style>